<template>
  <div class="layui-layout layui-layout-admin">
    <div class="adminnav1">
      <Pagetop></Pagetop>
    </div>
    <div class="adminnav2">
      <Secondnav urlname="market"></Secondnav>
    </div>

    <div class="page">
      <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-body cardbody">
                <fieldset class="layui-elem-field layui-field-title">
                  <legend>会员等级信息</legend>
                </fieldset>
                <div class="layui-form" lay-filter="">
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">等级名称</label>
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="name"
                          placeholder="请输入等级名称"
                          v-model="itemData.name"
                          autocomplete="off"
                          class="layui-input"
                          disabled="ture"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">会员等级</label>
                    <div class="layui-input-inline">
                      <select
                        name="memberGrade"
                        lay-filter="memberGrade"
                        v-model="itemData.memberGrade"
                      >
                        <option value="ZERO">非会员</option>
                        <option value="ONE">1级</option>
                        <option value="TWO">2级</option>
                        <option value="THREE">3级</option>
                        <option value="FOUR">4级</option>
                        <option value="FIVE">5级</option>
                        <option value="SIX">6级</option>
                        <option value="SEVEN">7级</option>
                        <option value="EIGHT">8级</option>
                        <option value="NINE">9级</option>
                        <option value="TEN">10级</option>
                        <option value="ELEVEN">11级</option>
                        <option value="TWELVE">12级</option>
                        <option value="THIRTEEN">13级</option>
                        <option value="FOURTEEN">14级</option>
                        <option value="FIFTEEN">15级</option>
                      </select>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">会员价格</label>
                      <div class="layui-input-inline">
                        <input
                          type="number"
                          name="price"
                          placeholder="请输入价格,单位(元)"
                          autocomplete="off"
                          v-model="itemData.price"
                          class="layui-input"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">折扣</label>
                      <div class="layui-input-inline">
                        <input
                          type="number"
                          name="discount"
                          placeholder="75表示7.5折"
                          autocomplete="off"
                          v-model="itemData.discount"
                          class="layui-input"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-body cardbody">
                <fieldset class="layui-elem-field layui-field-title">
                  <legend>会员营销信息</legend>
                </fieldset>
                <div class="layui-form" lay-filter="">
                  <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                      <select
                        name="mobileStatus"
                        lay-filter="mobileStatus"
                        placeholder="手机号是否必填"
                        v-model="itemData.memberMarketing.mobileStatus"
                      >
                        <option value="YES">是</option>
                        <option value="NO">否</option>
                      </select>
                    </div>
                    <span class="notes">手机号是否必填</span>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">有效期时间</label>
                      <div class="layui-input-inline">
                        <input
                          type="number"
                          name="expirationDay"
                          placeholder="请输入时间"
                          autocomplete="off"
                          v-model="itemData.memberMarketing.expirationDay"
                          class="layui-input"
                        />
                      </div>
                    </div>
                    <span class="notes">单位:月(至少一个月)</span>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">优惠券日期</label>
                      <div class="layui-input-inline">
                        <input
                          type="number"
                          name="couponDay"
                          placeholder="请输入日期"
                          autocomplete="off"
                          v-model="itemData.memberMarketing.couponDay"
                          class="layui-input"
                        />
                      </div>
                    </div>
                    <span class="notes">到账日期(每月几号1号就传1)</span>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">数量</label>
                      <div class="layui-input-inline">
                        <input
                          type="number"
                          name="number"
                          placeholder="请输入数量"
                          autocomplete="off"
                          v-model="
                            itemData.memberMarketing.levelMarketingDTOList[0]
                              .number
                          "
                          class="layui-input"
                          disabled="ture"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">优惠券名称</label>
                    <div class="layui-input-inline">
                      <select
                        name="publishId"
                        lay-filter="publishId"
                        v-model="
                          itemData.memberMarketing.levelMarketingDTOList[0]
                            .publishId
                        "
                      >
                        <option v-for="item in yhjlist" :value="item.id">{{
                          item.name
                        }}</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-body cardbody">
                <fieldset class="layui-elem-field layui-field-title">
                  <legend>会员权益信息</legend>
                </fieldset>
              </div>
              <div class="layui-card-body">
                <div class="buttop">
                  <button
                    type="button"
                    class="layui-btn  layui-btn-normal"
                    @click="addData"
                    style="margin-bottom:10px"
                  >
                    新增
                  </button>
                </div>
                <Tables
                  :fdate="pdate"
                  :result="res"
                  height="430"
                  :totalCount="totalRows"
                  :pageNumber="curindex"
                  :fbtn="btn"
                ></Tables>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-body cardbody">
                <div class="layui-form-item" style="margin-left:50%;">
                  <!-- <div class="layui-input-block"> -->
                  <button
                    class="layui-btn layui-btn-lg layui-btn-normal"
                    @click="sure"
                  >
                    确认
                  </button>
                  <!-- </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagetop from "../common/pagetop.vue";
import Secondnav from "../common/secondnav.vue";
import Tables from "../common/tables.vue";
import Search from "../common/search.vue";
export default {
  name: "meadd1",
  components: { Pagetop, Secondnav, Tables, Search },
  data() {
    return {
      id: "",

      pdate: [], //表头
      res: "", //内容
      totalRows: "", //总数量
      curindex: 0, //页数
      btn: [], //按钮
      searchArr: [], //搜索
      isShow: false,
      seapram: "",

      itemData: {
        limitDates: "0",
        maxScore: "1",
        minScore: "1",
        name: "", //等级名称
        memberGrade: "", //会员等级
        price: "", //会员价格
        discount: "", //折扣
        memberMarketing: {
          mobileStatus: "", //手机号
          expirationDay: "", //有效时间
          couponDay: "", //优惠券到账日期
          levelMarketingDTOList: [
            {
              publishId: "", //优惠券
              number: "" //数量
            }
          ]
        },
        membershipInterests: [
          {
            equityType: {
              id: "",
              name: "", //权益名称
              describe: "" //，权益描述
            }
          }
        ]
      },

      yhjlist: [], //优惠券名称
      lxlist: [], //类型
      type: localStorage.getItem("type")
    };
  },
  mounted() {
    var _this = this;
    this.getyhj(); //优惠券
    this.getlx(); //类型
    this.getdates();
    this.getdate();
    this.id = this.$route.query.id;
    // window.getdates = this.getdates;
  },
  methods: {
    getdates: function() {
      var vm = this;
      this.id = this.$route.query.id;
      var url =
        "/crm/papi/v1.9/member-marketing/template/" + this.$route.query.id;
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        // alert(url + "//" + JSON.stringify(ret));
        vm.itemData = ret.data;
        vm.itemData.price = ret.data.price / 100;
        // alert(JSON.stringify(ret.data))
      });
    },
    getdate: function() {
      var _this = this;
      this.id = this.$route.query.id;
      var url =
        "/crm/bapi/v1.9/membership-interests/level/" + this.$route.query.id;
      if (_this.seapram) {
        var dates = {
          size: pageSize,
          page: _this.curindex
        };
        var res = _this.seapram;
        for (var i = 0; i < res.length; i++) {
          dates[res[i].key] = res[i].val;
        }
      } else {
        var dates = {
          size: pageSize,
          page: _this.curindex
        };
      }
      //alert(url+"//"+JSON.stringify(dates))
      ajaxRequest(url, "GET", "json", dates, function(ret, err) {
        //alert(url+"//"+JSON.stringify(ret))
        var arr = [];
        arr[0] = [
          { field: "id", title: "id" },
          {
            field: "levelName",
            title: "会员等级名称"
          },
          {
            field: "name",
            title: "权益名称",
            templet: function(d) {
              return d.equityType.name;
            }
          },
          {
            field: "describe",
            title: "权益描述",
            templet: function(d) {
              return d.equityType.describe;
            }
          },

          {
            field: "right",
            title: "操作",
            width: "80",
            fixed: "right",
            templet: function(d) {
              var str =
                '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
              return str;
            }
          }
        ];
        _this.pdate = arr;
        _this.res = ret.data;
        _this.totalRows = ret.data.totalRows;
        _this.curindex = ret.data.page + 1;
      });
    },
    page: function(index, obj) {
      this.curindex = index;
      this.getdate();
    },
    sousuo: function(pram) {
      this.seapram = pram;
      this.res = "";
      this.totalRows = "";
      this.curindex = 1;
      this.getdate();
    },
    addData: function() {
      var _this = this;
      layer.open({
        type: 2,
        title: "添加会员权益",
        content: baseurl + "/memberqyadd?id=" + this.$route.query.id,
        area: _this.screens() < 2 ? ["60%", "50%"] : ["600px", "500px"]
      });
    },
    delInfo: function(data) {
      var _this = this;
      layer.confirm("是否确认删除？", function() {
        var url = "/crm/bapi/v1.9/membership-interests/" + data.id;
        ajaxRequest(url, "DELETE", "json", "", function(ret, err) {
          layer.msg("操作成功");
          setTimeout(function() {
            _this.getdate();
          }, 1000);
        });
      });
    },
    screens: function() {
      return screen();
    },
    getyhj: function() {
      var vm = this;
      var url = "/crm/papi/v1.9/coupon/admin/template";
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        vm.yhjlist = ret.data.list;
        // alert(JSON.stringify(ret.data))
      });
    },
    getlx: function() {
      var vm = this;
      var url = "/crm/papi/v1.9/membership-interests/equity/type";
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        vm.lxlist = ret.data;
      });
    },
    sure: function(data) {
      var _this = this;
      if (_this.itemData.mobileStatus == "NO") {
        layer.msg("请先领取手机号");
        return false;
      }
      _this.id = data.id;
      var dates = _this.itemData;
      dates.price = _this.itemData.price * 100;

      if (_this.itemData.minScore == null) {
        _this.itemData.minScore = "1";
      }
      if (_this.itemData.maxScore == null) {
        _this.itemData.maxScore = "1";
      }
      if (_this.itemData.limitDates == null) {
        _this.itemData.limitDates = "0";
      }

      // alert(JSON.stringify(dates));
      var url = "/crm/bapi/v1.9/member-marketing/levelTemplate/";

      ajaxRequest(url, "POST", "json", dates, function(ret, err) {
        layer.msg("操作成功");
        setTimeout(function() {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    }
  },
  updated: function() {
    var _this = this;
    layui.use("form", function() {
      var form = layui.form;
      form.render();
      form.on("select(memberGrade)", function(data) {
        _this.itemData.memberGrade = data.value;
      });
      form.on("select(mobileStatus)", function(data) {
        _this.itemData.memberMarketing.mobileStatus = data.value;
      });
      form.on("select(publishId)", function(data) {
        _this.itemData.memberMarketing.levelMarketingDTOList[0].publishId =
          data.value;
      });
      form.on("select(equityType)", function(data) {
        _this.itemData.membershipInterests[0].equityType.id = data.value;
      });
    });
  }
};
</script>
<style scoped>
.notes {
  color: #999;
}
</style>
